<template>
    <view class="wrap">
        <view class="item-warp">
            <view class="item" v-for="(item, index) in list" :key="index">
                <u-lazy-load
                    threshold="-450"
                    height="400"
                    img-mode="aspectFill"
                    border-radius="10"
                    :image="item.src"
                    :index="index"
                    @statusChange="statusChange"
                    @clickImg="clickImg"
                ></u-lazy-load>
            </view>
        </view>
        <u-loadmore :status="status" @loadmore="getData"></u-loadmore>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { $u } from '@/uni_modules/uview-pro';
import { onLoad } from '@dcloudio/uni-app';

const list = ref([]);
const status = ref('loadmore');
const data = ref([
    {
        src: 'https://gtd.alicdn.com/sns_logo/i1/TB124_3NXXXXXasXVXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i7/TB1IWtgQFXXXXcmXFXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i1/TB1_f_PLXXXXXbVXpXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        // 这里会加载失败，显示错误的占位图
        src: 'error.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i6/TB1SIYrLXXXXXaAXpXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i1/TB11yxeNVXXXXbwXFXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i3/TB1ndJiQFXXXXctaXXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i4/TB1BYGDLpXXXXbuXXXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i2/TB1_9GoMVXXXXXmaXXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i2/TB1cSZZNFXXXXaKaXXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        // 这里会加载失败，显示错误的占位图
        src: 'error.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i8/TB1RVS_QpXXXXXBXXXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i5/TB1xEJiLXXXXXcxaXXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i6/TB1DSuHJVXXXXXmXXXXwu0bFXXX.png_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i5/TB1aMNyLpXXXXa2XXXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i8/TB1JRHEQpXXXXXwXVXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i7/TB1qKEuQpXXXXXYXXXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i7/TB1TlOfQFXXXXX2XXXXwu0bFXXX.png_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i1/TB1SKu.QpXXXXbDXVXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        // 这里会加载失败，显示错误的占位图
        src: 'error.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i8/TB1um5GQpXXXXbiaXXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i1/TB1pxCTQpXXXXa2apXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i6/TB1zksMNVXXXXaRapXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i4/TB1nbrcOXXXXXXEXpXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i4/TB1CI_NQpXXXXXaXVXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i2/TB18vTdQFXXXXXlXpXXwu0bFXXX.png_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i7/TB1doDVQpXXXXcRaXXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i1/TB17LgBNFXXXXaSXVXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i6/TB1fVJJQFXXXXcyXpXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i3/TB1wnBTKFXXXXcQXXXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i1/TB124_3NXXXXXasXVXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i7/TB1IWtgQFXXXXcmXFXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i1/TB1_f_PLXXXXXbVXpXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i1/TB1DX3hIpXXXXXIaXXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i6/TB1SIYrLXXXXXaAXpXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i1/TB11yxeNVXXXXbwXFXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i3/TB1ndJiQFXXXXctaXXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i4/TB1BYGDLpXXXXbuXXXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i2/TB1_9GoMVXXXXXmaXXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i2/TB1cSZZNFXXXXaKaXXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        // 这里会加载失败，显示错误的占位图
        src: 'error.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i8/TB1RVS_QpXXXXXBXXXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i5/TB1xEJiLXXXXXcxaXXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i6/TB1DSuHJVXXXXXmXXXXwu0bFXXX.png_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i5/TB1aMNyLpXXXXa2XXXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i8/TB1JRHEQpXXXXXwXVXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i7/TB1qKEuQpXXXXXYXXXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i7/TB1TlOfQFXXXXX2XXXXwu0bFXXX.png_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i1/TB1SKu.QpXXXXbDXVXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i2/TB17gJ3OXXXXXcrXpXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i8/TB1um5GQpXXXXbiaXXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i1/TB1pxCTQpXXXXa2apXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i6/TB1zksMNVXXXXaRapXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i4/TB1nbrcOXXXXXXEXpXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i4/TB1CI_NQpXXXXXaXVXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i2/TB18vTdQFXXXXXlXpXXwu0bFXXX.png_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i7/TB1doDVQpXXXXcRaXXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        src: 'https://gtd.alicdn.com/sns_logo/i1/TB17LgBNFXXXXaSXVXXSutbFXXX.jpg_240x240xz.jpg'
    },
    {
        // 这里会加载失败，显示错误的占位图
        src: 'error.jpg'
    }
]);

onLoad(() => {
    getData();
});

function statusChange(status) {
    console.log(status);
}

function clickImg(img) {
    console.log(img);
}

function getData() {
    let index = 0;
    status.value = 'loading';
    setTimeout(() => {
        for (let i = 0; i < 10; i++) {
            index = $u.random(0, data.value.length - 1);
            list.value.push({
                src: data.value[index].src
            });
        }
        status.value = 'loadmore';
    }, 1500);
}
</script>

<style lang="scss" scoped>
.wrap {
    padding: 30rpx;
    display: block;
}

.item-warp {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.item-warp .item {
    flex: 0 0 335rpx;
    height: 400rpx;
    margin-bottom: 20rpx;
    border-radius: 10rpx;
    overflow: hidden;
}
</style>
